<template>
	<scroll-view scroll-y="true" class=" rf-row-wrapper">
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" :disabled="isDis" type="text" v-model="auth.name.t" placeholder="请输入姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">身份证号</text>
			<input class="input" :disabled="isDis" type="text" maxlength="18" v-model="auth.card.t"
				placeholder="请输入身份证号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" :disabled="isDis" type="text" maxlength="18" v-model="auth.mobile.t"
				placeholder="请输入手机号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">USDT网络</text>
			<view class="" @click="handleShow">
				{{auth.network.t || '请选择'}}
			</view>
		</view>
		<view class="row b-b">
			<text class="tit">USDT地址</text>
			<input class="input" type="text" :disabled="isDis" v-model="auth.addr.t" placeholder="请输入USDT地址"
				placeholder-class="placeholder" />
		</view>
		<view class="row">
			支付宝
		</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" :disabled="isDis" type="text" v-model="auth.ali_name.t" placeholder="请输入支付宝收款人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">支付宝账号</text>
			<input class="input" :disabled="isDis" type="text" v-model="auth.ali_mobile.t" placeholder="请输入支付宝账号"
				placeholder-class="placeholder" />
		</view>
		<view class="row">
			支付宝收款二维码
		</view>
		<view class="row" style="height: auto;">
			<view class="cell nocell">
				<image :src="auth.ali_image.t?this.$fun.imgUrl(auth.ali_image.t):'/static/ico-101.png'"
					@click="uploadImage('auth','ali_image')" style="width: 150rpx;height:150rpx;margin: 0 auto;"
					mode=""></image>
			</view>
		</view>
		<view class="row">
			微信
		</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" type="text" :disabled="isDis" v-model="auth.wx_name.t" placeholder="请输入微信收款人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row">
			微信收款二维码
		</view>

		<view class="row" style="height: auto;">
			<view class="cell nocell">
				<image :src="auth.wx_image.t?this.$fun.imgUrl(auth.wx_image.t):'/static/ico-101.png'"
					@click="uploadImage('auth','wx_image')" style="width: 150rpx;height:150rpx;margin: 0 auto;" mode="">
				</image>
			</view>
		</view>
		<view class="row">
			银行卡
		</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" :disabled="isDis" type="text" v-model="auth.bank_name.t" placeholder="请输入开户人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">开户行
			</text>
			<input class="input" :disabled="isDis" type="text" v-model="auth.bank_addr.t" placeholder="请输入银行卡开户行 "
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">卡号</text>
			<input class="input" type="text" :disabled="isDis" v-model="auth.bank_code.t" placeholder="请输入银行卡号"
				placeholder-class="placeholder" />
		</view>
		<view style="width: 90%;margin: 20rpx auto;">
			<u-button v-if="!isDis" type="primary" text="提交" @tap="confirm"></u-button>
			<u-button v-else type="primary" text="编辑" @tap="edit"></u-button>
		</view>
		<view style="height: 30rpx;"></view>
		<!-- 		<button class="add-btn" v-if="!isDis" :class="'bg-' + themeColor.name" @tap="confirm">
			提交
		</button> -->
		<!--加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
		<u-action-sheet :actions="networkList" title="选择网络" :show="show" cancelText="取消"
			@select="handleSelect" @close='show = false'></u-action-sheet>
	</scroll-view>
</template>
<script>
	/**
	 * @des 用户账户中心
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-01-10 15:17
	 * @copyright 2019
	 */
	// import {
	// 	memberInfo,
	// 	memberUpdate,
	// 	uploadImage
	// } from '@/api/userInfo';
	export default {
		data() {
			return {
				loading: false,
				curType: '',
				name: '',
				phone: '',
				image: '', //充值图片
				id: '',
				isDis: false,
				infoList: {},
				id: '',
				show: false,
				networkList: [],
				auth: {
					name: {
						t: '',
						p: '请输入真实姓名',
						required:true
					}, // 真实姓名
					card: {
						t: '',
						p: '请输入身份证号',
						required:true
					}, //身份证号
					mobile: {
						t: '',
						p: '请输入手机号',
						required:true
					}, //手机号
					ali_name: {
						t: '',
						p: '请输入支付宝收款人姓名',
						required:true
					}, // 支付宝收款人姓名
					ali_mobile: {
						t: '',
						p: '请输入支付宝账号',
						required:true
					}, // 支付宝收款人姓名
					ali_image: {
						t: '',
						p: '请上传支付宝收款码',
						required:true
					}, // 支付宝收款码
					wx_name: {
						t: '',
						p: '请输入微信收款人姓名',
						required:true
					}, // 微信收款人姓名
					wx_image: {
						t: '',
						p: '请上传微信收款码',
						required:true
					}, // 微信收款码 
					bank_name: {
						t: '',
						p: '请输入开户人姓名',
						required:true
					}, // 开户人姓名
					bank_addr: {
						t: '',
						p: '请输入银行卡开户行',
						required:true
					}, // 银行卡开户行 
					bank_code: {
						t: '',
						p: '请输入银行卡号',
						required:true
					}, // 银行卡号
					network: {
						t: '',
						p: '请输入USDT网络',
						required:false
					}, // 银行卡号
					addr: {
						t: '',
						p: '请输入USDT地址',
						required:false
					}, // 银行卡号
				}
			};
		},
		onLoad(options) {
			this.$fun.ajax
				.post('/user/userRealname', {})
				.then(res => {
					this.networkList = res.data.network.map(item => {
						return {
							name: item
						}
					})
					if (res.data && res.data.info) {
						this.infoList = res.data.info
						this.isDis = true
						for (var key in res.data.info) {
							if (key !== 'id') {
								this.auth[key].t = res.data.info[key]
							}

						}

					}
				})
				.catch(() => {
					this.loading = false;
				});
		},
		methods: {
			handleSelect(item) {
				this.auth.network.t = item.name
				console.log(this.auth.network.t);
				this.show = false
			},
			handleShow() {
				if (!this.isDis) {
					this.show = true
				}
			},
			edit() {
				console.log(this.auth);
				this.id = this.infoList.id
				this.isDis = !this.isDis
			},
			checkePrice(item, index) {
				this.money = item;
				this.currentIndex = index
			},
			confirm() {
				let parms = {}
				for (var key in this.auth) {
						if (this.auth[key].t == '' && this.auth[key].required) {
							this.$fun.msg(this.auth[key].p);
							return
						} else {
							parms[key] = this.auth[key].t
						}
				}
				this.loading = true
				if (this.id) {
					this.$fun.ajax
						.post('/user/realname', {
							...parms,
							id: this.id
						})
						.then(res => {
							this.$fun.msg(res.msg);
							this.loading = false;
							if (res.code == 1) {
								this.$fun.jump('/pages/index/index', 3, 1200)
							}
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					this.$fun.ajax
						.post('/user/realname', {
							...parms
						})
						.then(res => {
							this.$fun.msg(res.msg);
							this.loading = false;
							if (res.code == 1) {
								this.$fun.jump('/pages/index/index', 3, 1200)
							}
						})
						.catch(() => {
							this.loading = false;
						});
				}
			},
			// 上传头像
			uploadImage(str1, str2) {
				if (this.isDis) {
					return
				}
				// 从相册选择图片
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						_this.handleUploadFile(res.tempFilePaths, str1, str2);
					}
				});
			},
			// 上传头像
			handleUploadFile(data, str1, str2) {
				const _this = this;
				const filePath = data.path || data[0];
				_this.$fun.uploadPic(filePath, 'file')
					.then(r => {
						_this[str1][str2].t = r.data.url;
					});
			},
		}
	};
</script>
<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #FFFFFF;
	}

	.my-account {
		background-color: #FFFFFF;
		/*  #ifndef H5  */
		height: 100vh;
		/*  #endif  */
		padding: 32upx 20upx;
		width: 100%;

		.header {
			padding: 30upx;
			height: 200upx;
			display: flex;
			align-items: center;
			opacity: 0.9;
			border-radius: 20upx;
			color: rgba(255, 255, 255, 0.6);
			font-size: $font-sm;
			position: relative;

			.account {
				width: calc(100% - 60upx);
				display: flex;
				position: absolute;
				z-index: 2;
				justify-content: space-between;

				.assets {
					.money {
						color: #fff;
						font-size: $font-lg + 10upx;
						margin: 0;
					}
				}

				.recharge {
					font-size: $font-base;
					width: 150upx;
					height: 54upx;
					line-height: 54upx;
					border-radius: $font-base;
					background-color: #fff9f8;
					text-align: center;
					margin-top: 10upx;
				}
			}

			.cumulative {
				width: calc(100% - 240upx);
				position: absolute;
				bottom: 20upx;
				display: flex;
				justify-content: space-between;

				.money {
					color: #fff;
					font-size: $font-lg + 4upx;
					margin: 0;
				}
			}

			.header-bg {
				position: absolute;
				width: 100%;
				height: 320upx;
				z-index: 1;
				top: 0;

				image {
					width: 100%;
					height: 320upx;
				}
			}
		}

		.nav {
			border-bottom: 1px solid #f5f5f5;
			display: flex;

			.item {
				flex: 1;
				margin: 20upx;
				font-size: $font-base - 4upx;
				display: inline-block;
				text-align: center;
				color: #999;

				.iconfont {
					display: block;
					margin: 0 auto;
					font-size: $font-lg + 20upx;
				}
			}
		}

		.advert {
			display: flex;

			.item {
				flex: 1;
				border-radius: 24upx;
				padding: 10upx 0;
				margin: 20upx 10upx;
				display: flex;
				justify-content: space-between;

				.iconfont {
					font-size: $font-lg + 20upx;
					margin-right: 20upx;
				}

				.text {
					margin-left: 20upx;

					.name {
						font-size: $font-base;
						font-weight: bold;
						height: 40upx;
					}

					.desc {
						font-size: $font-sm - 2upx;
					}
				}
			}

			.on {
				background-color: #fff3f3;
			}
		}
	}

	/* 内容区 */
	.conter {
		.title {
			color: #666;
			margin-top: 50rpx;
			font-size: 30rpx;
		}

		.cent {
			margin-top: 25rpx;
			overflow: hidden;

			.list {
				width: 200rpx;
				height: 120rpx;
				border: 1rpx solid #e8e8e8;
				float: left;
				margin: 0 18rpx;
				margin-bottom: 45rpx;
				position: relative;
				text-align: center;
				line-height: 120rpx;
				border-radius: 15rpx;

				// &:nth-child(3n) {
				// 	margin-right: 0;
				// }

				input {
					height: 50rpx;
					margin-left: 10rpx;
					margin-top: 35rpx;
				}

				.van-cell {
					padding: 0;
					width: 180rpx;
				}

				image {
					width: 40rpx;
					height: 37rpx;
					position: absolute;
					bottom: 0;
					right: 0;
					display: none;
				}

				&.active {
					color: #dd1021;
					border: 1rpx solid #dd1021;

					image {
						display: block;
					}
				}
			}
		}
	}

	.top {
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;

		.left {
			margin-top: 40rpx;

			.title {
				font-size: 24rpx;
				color: #666;
			}

			.num {
				font-size: 48rpx;
				color: #000;
				margin-top: 30rpx;
				font-weight: bold;
			}

			.jyjl {
				font-size: 24rpx;
				color: #dd1021;
				margin-top: 50rpx;
			}
		}

		.rightimg {
			width: 233rpx;
			height: 240rpx;
			margin-right: 50rpx;
		}
	}

	.rf-row-wrapper .row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 16px;
		height: 60px;
		background: #fff;

		.tit {
			width: 200rpx;
		}
	}

	.rf-row-wrapper {
		height: 100%;
	}
</style>